<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>

<style>

    .bootstrap-select{
        width: 100% !important;
    }
    .glyphicon-arrow-up{
        color: red;
    }

    .glyphicon-arrow-down{
        color: #76d471;
    }
    #refreshs{
        position:fixed;
        top: 200px;

        width: 220px;
        border: 1px solid #cccccc;
        border-right: none;
        border-radius:5px 0 0 5px;
        background: #ffffff;
        padding: 10px 5px;
        z-index: 999;
    }
    .arrows{
        position: absolute;
        left: -41px;
        top: 40px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
        background: #62a6f5;
        cursor: pointer;
    }
    .refreshss{
        cursor: pointer;
        background: #62a6f5;
        position: absolute;
        left: -41px;
        top: 79px;
        width: 40px;
        height: 40px;
        line-height:40px;
        text-align: center;
        border: 1px solid #ffffff;
    }
    .refreshsss{
        top: 120px;
    }
</style>
<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="refreshs('refresh')"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <div class="refreshss refreshsss" onclick="refreshs('play')">
        <span style="color:#ffffff;font-size: 16px;" class="fa fa-pause"></span>
    </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1" >
                <select style="height: 0" id="select" title="所有平台" multiple  onchange="selectChange()"></select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-10 col-md-offset-1" style="text-align: center;">
                <div class="btn-group-vertical" role="group" style="width: 100%;" id="dateselect">
                    <div type="button" class="btn btn-default">1分钟</div>
                    <div type="button" class="btn btn-default">半小时</div>
                    <div type="button" class="btn btn-default btn-primary">1小时</div>
                </div>
            </div>
        </div>

        <!--<span class="glyphicon glyphicon-refresh" style="font-size: 30px;"></span>-->

</div>


    <div class="row" style="margin-top: 10px;">
        <#if shiro.hasPermission("data:statsInfo:ipCount")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats5">
            <div class="stats_title">
                IP数
            </div>
            <div class="stats_amount" id="stats5_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
        </#if>
<#if shiro.hasPermission("data:statsInfo:lockedDomain")>
        <div class="col-md-1 stats_box" id="stats7">
            <div class="stats_title">
                被封域名数
            </div>
            <div class="stats_amount" id="stats7_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:statsInfo:newUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats2">
            <div class="stats_title">
                新增用户数
            </div>
            <div class="stats_amount" id="stats2_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:statsInfo:activeUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats3">
            <div class="stats_title">
                活跃用户数
            </div>
            <div class="stats_amount" id="stats3_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:statsInfo:totalUser")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats1">
            <div class="stats_title">
                累计用户数
            </div>
            <div class="stats_amount" id="stats1_num">
                0
            </div>

        </div>
</#if>
<#if shiro.hasPermission("data:statsInfo:newArticle")>
        <div class="col-xs-6 col-md-1 stats_box" id="stats6">
            <div class="stats_title">
                文章新增数
            </div>
            <div class="stats_amount" id="stats6_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("data:statsInfo:forwardArticle")>
        <div class="col-xs-6 col-md-1 stats_box"  id="stats4">
            <div class="stats_title">
                转发文章数
            </div>
            <div class="stats_amount" id="stats4_num">
                0
            </div>
            <div class="stats_contrast">
                同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
            </div>
        </div>
</#if>
<#if shiro.hasPermission("mainDetails:shareArticleNum:textShow")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats11">
    <div class="stats_title">
        转发文章次数
    </div>
    <div class="stats_amount" id="stats11_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<!--<#if shiro.hasPermission("data:statsInfo:ArticlePeople")>-->
<!--<div class="col-xs-6 col-md-1 stats_box"  id="stats8">-->
    <!--<div class="stats_title">-->
        <!--转发文章人数-->
    <!--</div>-->
    <!--<div class="stats_amount" id="stats8_num">-->
        <!--0-->
    <!--</div>-->
    <!--<div class="stats_contrast">-->
        <!--同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>-->
    <!--</div>-->
<!--</div>-->
<!--</#if>-->
<#if shiro.hasPermission("data:statsInfo:earnings")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats9">
    <div class="stats_title">
        收益(总)
    </div>
    <div class="stats_amount" id="stats9_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("data:statsInfo:ipExpend")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats10">
    <div class="stats_title">
        IP消耗(总)
    </div>
    <div class="stats_amount" id="stats10_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("mainDetails:comparePriceIp:showTopText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats12">
    <div class="stats_title">
        竞价ip消耗
    </div>
    <div class="stats_amount" id="stats12_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>
<#if shiro.hasPermission("mainDetails:comparePriceExpend:showTopText")>
<div class="col-xs-6 col-md-1 stats_box"  id="stats13">
    <div class="stats_title">
        竞价收益
    </div>
    <div class="stats_amount" id="stats13_num">
        0
    </div>
    <div class="stats_contrast">
        同比<span class="stats_contrast_num">0%</span><span class="glyphicon" ></span>
    </div>
</div>
</#if>

    </div>


<script>
    //mainDetails:comparePriceIp:showTopText
    //mainDetails:comparePriceExpend:showTopText
    <!--统计详情-->
    function gettime(num){
        var _thisdate =new Date() - (1000*60 *60 *24*num)
        var date = new Date(_thisdate);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    function setParams() {
        data_id = $("#select").val() || null;
       if(_date){
           console.log(_date);
            var selectTime = _date.split(' - ');
           startTimes = selectTime[0];
           endTimes = selectTime[1];
       }else{
            startTimes = gettime(1);
            endTimes = gettime(0);
       }
       var params = {
           beforeTime:startTimes,
           afterTime:endTimes,
           timeType:dateselect,
           platformId:data_id
        };
        var minData;
        var maxData;
        if(params.startDate>params.endDate){
            maxData = params.startDate;
            minData = params.endDate;
            params.endDate = maxData;
            params.startDate = minData;
        }
        return params;
    }
    function refreshs(type){


            statsInit();
            chartPage.init(setParams());
            window.clearInterval(getdata);


        if(type == 'refresh'){
            $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
            indexTimer = true;
            getdata = window.setInterval(function(){
                if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/mainDetails.html'){
                    return;
                }
                statsInit();
                chartPage.init(setParams());
            },1000*60)
        }
        if(type == 'play'){
            if(!indexTimer){
                $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
                indexTimer = true;
                getdata = window.setInterval(function(){
                    if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/mainDetails.html'){
                        return;
                    }
                    statsInit();
                    chartPage.init(setParams());
                },1000*60)
            }else{
                $(".refreshsss span").addClass("fa-play").removeClass("fa-pause");
                indexTimer = false;
            }
        }

    }
    var getdata = null;
    var statsData = false;
    var data_id=null;
    var _date="";
    var indexloading = null;
    var dateselect ='hour';
    var indexTimer = false;
    var startTimes = gettime(1);
    var  endTimes = gettime(0);
    $(function(){
        $('.arrows').click(function(){
            if($('#refreshs').css('right')=='0px'){
                $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                $('#refreshs').animate({
                    right:'-220px'
                })
            }else{
                $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                $('#refreshs').animate({
                    right:'0px'
                })
            }

        })
        $('#dateselect .btn').each(function(index){
            $(this).click(function(){
                $('#dateselect .btn').removeClass('btn-primary');
                $(this).addClass('btn-primary')
                if(index==0){
                    dateselect = 'minute';
                }else if(index==1){
                    dateselect = 'semih';
                }else if(index==2){
                    dateselect = 'hour';
                }
                refreshs('refresh')
            })
        })
        layui.use(['form','laydate'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date',
                position: 'fixed',
                range: true,
                done: function(value, date, endDate){
                    _date =value;
                    refreshs('refresh')
                }
            });
           refreshs('refresh')
           $.ajax({
                type : "get",
                url : baseURL+"platform/findAllPlatform",
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) {
                    statsData = false;
                    if(data.code==0){
                        var _html = ''
                        for(var i=0;i<data.platformList.length;i++){
                            _html = _html + '<option value="'+data.platformList[i].platformId+'">'+data.platformList[i].nickName+'</option>'
                        }
                        $('#select').append(_html);
                        $('#select').selectpicker('refresh');
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    statsData = false;
                    layer.msg('数据获取失败');
                }
            });
        });
        $('#date').val(gettime(1)+' - '+gettime(0));
    })
    function selectChange(){
        refreshs('refresh')
    }
    function statsInit(){
      var _data = setParams();

        if(!statsData){
            indexloading = layer.load(2);
            statsData = true;
            $.ajax({
                type : "POST",
                url : baseURL+"statis/getStatisDetail",
                cache : false,
                data:JSON.stringify(_data),
                dataType : "json",
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    statsData = false;
                    if(data.code==0){
                        //累计用户数
                        setData('stats1_num','#stats1',data.result.totalUser)
                        //新增用户数
                        setData('stats2_num','#stats2',data.result.newUser,data.result.newUserRiseOrFall,data.result.newUserPercent)
                        //活跃用户数
                        setData('stats3_num','#stats3',data.result.activeUser,data.result.activeUserRiseOrFall,data.result.activeUserPercent)
                        //转发文章数
                        setData('stats4_num','#stats4',data.result.forwardArticle,data.result.forwardArticleRiseOrFall,data.result.forwardArticlePercent)
                        //ip数量
                        setData('stats5_num','#stats5',data.result.ipCount,data.result.ipCountRiseOrFall,data.result.ipCountRate)
                        //文章新增数
                        setData('stats6_num','#stats6',data.result.newArticle,data.result.newArticleRiseOrFall,data.result.newArticlePercent)
                        //被封域名数
                        // setData('stats7_num','#stats7',data.result.lockedDomain,data.result.lockedDomainRiseOrFall,data.result.lockedDomainPercent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                },
                error:function(){
                    layer.close(indexloading);
                    statsData = false;
                     layer.msg('数据获取失败');
                }
            });
            //转发文章人数
            // $.ajax({
            //     type : "POST",
            //     url : baseURL+"articleStatis/getForwardArticlePeopleStatisDetailTotal",
            //     cache : false,
            //     data:JSON.stringify(_data),
            //     dataType : "json",
            //     contentType:'application/json',
            //     success: function(data) {
            //         layer.close(indexloading);
            //
            //         if(data.code==0){
            //             //转发文章人数
            //             setData('stats8_num','#stats8',data.result.tcount,data.result.riseOrFall,data.result.percent)
            //         }else{
            //             layer.msg('数据获取失败');
            //         }
            //     }
            // });
            //竞价收益
            ajaxc({
                type : "POST",
                permit:'mainDetails:comparePriceExpend:showTopText',
                url : baseURL+"biddingTopRateStatis/getBiddingCostTopRateTimeContrastTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats13_num','#stats13',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //竞价ip
            ajaxc({
                type : "POST",
                permit:'mainDetails:comparePriceIp:showTopText',
                url : baseURL+"biddingTopRateStatis/getBiddingClickIpTopRateTimeContrastTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats12_num','#stats12',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //被封域名数
            ajaxc({
                type : "POST",
                permit:'data:statsInfo:lockedDomain',
                url : baseURL+"domainsta/findDomainStaDetailData",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats7_num','#stats7',data.result.dataCount,data.result.riseOrFall,data.result.ratio)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //收益
            ajaxc({
                type : "POST",
                permit:'data:statsInfo:earnings',
                url : baseURL+"articleStatis/getExpandPriceStatisTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats9_num','#stats9',data.result.tcount,data.result.riseOrFall,data.result.percent)
                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //IP消耗
            ajaxc({
                type : "POST",
                permit:'data:statsInfo:ipExpend',
                url : baseURL+"articleStatis/getStatisticsIpStatisTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats10_num','#stats10',data.result.tcount,data.result.riseOrFall,data.result.percent)


                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });
            //转发文章次数
            ajaxc({
                type : "POST",
                permit:'mainDetails:shareArticleNum:textShow',
                url : baseURL+"articleStatis/getShareArticleNumStatisDetailTotal",
                data:JSON.stringify(_data),
                contentType:'application/json',
                success: function(data) {
                    layer.close(indexloading);
                    if(data.code==0){
                        setData('stats11_num','#stats11',data.result.tcount,data.result.riseOrFall,data.result.percent)


                    }else{
                        layer.msg('数据获取失败');
                    }
                }
            });

        }

    }

    function isInteger(obj) {

        return Math.round(obj) == obj   //是整数，则返回true，否则返回false
    }


    function setData(id,ids,totalCount,riseOrFall,countRate){
        var demo = new CountUp(id, 0, transformNum(totalCount),isInteger(transformNum(totalCount))?0:1, 2, {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: (totalCount+'').length>=5?'万':''
        });
        demo.start();

        if(riseOrFall==1){
            $(ids+' .stats_contrast_num').html('+'+countRate+'%').css({'color':'red'})
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-down ').addClass('glyphicon-arrow-up ')
        }else{
            $(ids+' .stats_contrast_num').html(countRate+'%').css({'color':'#76d471'});
            $(ids+' .glyphicon').removeClass('glyphicon-arrow-up ').addClass('glyphicon-arrow-down ')
        }


    }
    function transformNum(e,b){
        if(String(e).length<=4){
            return String(e);
        }else{
            var _e
            if(((parseFloat(e)/10000).toString()).indexOf('.')!=-1){
                _e = (parseFloat(e)/10000).toFixed(1);
            }else{
                _e = (parseFloat(e)/10000)
            }
            return _e+ (b==1?'万':'');
        }
    }
</script>